#include("/template/common/layout/_page_layout_all.html")
#@layout()

#define css()
<style>
    html, body {
        height: 98%;
        width: 98%;
    }

    .layui-text p {
        cursor: pointer;
    }

    .layui-text p:hover {
        color: red;
    }

    #list {
        padding: 10px;
    }

    #content {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
    }
</style>
#end

#define js()
<script type="text/javascript">
    layui.use('layer', function () {
        var layer = layui.layer,
            $ = layui.jquery,
            util = layui.util;
        var ul;

        /**
         * 获取列表的数据
         */
        $.get("#(ctxPath)/app/information/editData", {id: "#(projectId)"}, function (res) {
            var data = res.list;
            ul = $('<ul class="layui-timeline"></ul>');
            data.forEach(function (ele) {
                var li = $('<li class="layui-timeline-item"></li>');
                var i = $('<i class="layui-icon layui-timeline-axis" data-htmlName="' + ele.url + '">&#xe63f;</i>');
                var lt = $('<div class="layui-timeline-content layui-text"></div>');
                var h = $('<p class="layui-timeline-title htmlName" data-htmlName="' + ele.url + '">' + ele.name + '</p>');
                h.appendTo(lt);
                li.append(i).append(lt);
                ul.append(li);
            });
        });

        /**
         * 当点击的时候，获取当前的 src
         */
        $(document).on('click', '.htmlName', function (e) {
            var html = $(this).attr("data-htmlName");
            var content = $('#content');
            content.prop("src", "#(ctxPath)/app/information/list?id=#(projectId)&url=" + encodeURIComponent($(this).attr("data-htmlName")) + "&flag=#(flag)");
            if (html === "/app/fileupload"){
                content.prop("src", "#(ctxPath)/app/fileupload/index?projectID=#(projectId)&flag=#(flag)");
            } else if (html === "/app/fileupload/document"){
                content.prop("src", "#(ctxPath)/app/fileupload/document?id=#(projectId)&percent=#(percent)&flag=#(flag)");
            }
            content.css("display","");
        });

        /**
         * 右下角固定
         */
        util.fixbar({
            bar1: "&#xe60a;",
            bgcolor: '#1E9FFF',
            css:{
                right: 0,
                bottom: 200
            },
            click: function (type) {
                if (type === 'bar1') {
                    layer.open({
                        title: '资料查看',
                        id: 'list',
                        type: 1,
                        content: ul.html(),
                        skin: 'layui-layer-molv',
                        closeBtn: 1,
                        offset: 'r',
                        shadeClose: true,
                        anim: 1,
                        resize: false,
                        area: ['20%', '100%']
                    });
                }
            }
        });

        /**
         * 提示信息
         */
        $(function (e) {
            // $('li[type="bar1"]').prop("id","bar1");
            // $('li[type="bar2"]').prop("id","bar2");
            // layer.tips("点击这里查看资料哦","#bar1");
            layer.tips("点击这里查看资料哦", 'li[lay-type="bar1"]', {
                tipsMore: true,
                time: 3000
            });
        });
    });
</script>
#end

#define content()
<iframe id="content" src="#(ctxPath)/app/information/welcome?id=#(projectId)&flag=#(flag)">
</iframe>
#end